<template>
  <div class="toper">
    <div class="toper_bao">
      <span>{{ title }}</span>
      <svg xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
        <path
          d="M512 32c0 113.6-84.6 207.5-194.2 222c-7.1-53.4-30.6-101.6-65.3-139.3C290.8 46.3 364 0 448 0h32c17.7 0 32 14.3 32 32zM0 96C0 78.3 14.3 64 32 64H64c123.7 0 224 100.3 224 224v32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320C100.3 320 0 219.7 0 96z" />
      </svg>
    </div>
    <span class="date">{{ getDate() }}</span>
  </div>
</template>

<script setup lang="ts" name="header">
defineProps(['title', 'getDate'])

</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.date {
  font-weight: normal;
}

.toper {
  width: 100%;
  height: 60px;
  margin-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  position: relative;
  flex-direction: column;
}

.toper_bao {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .toper::before {
  content: '';
  position: absolute;
  width: 40%;
  height: 22px;
  border: 2px solid #006246;
  background-color: #ffffff;
  top: -2px;
  border-radius: 0 0 10px 10px;
  border-top: none;
} */

span {
  font-size: 16px;
  font-weight: bold;
  color: #006246;
}

svg {
  margin-left: 5px;
  width: 20px;
}
</style>